Completed
Pull Request — develop (#241)
by Xaver
28s
created

draw.js ➔ ... ➔ setHighlight   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 3

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 1
dl 0
loc 3
rs 10
nop 1
1
define(['helper'], function (helper) {
2
  var self = {};
3
4
  var ctx;
5
  var width;
6
  var height;
7
  var transform;
8
  var highlight;
9
10
  var NODE_RADIUS = 15;
11
  var LINE_RADIUS = 12;
12
13
  function drawDetailNode(d) {
14
    if (transform.k > 1 && d.o.is_online) {
15
      helper.positionClients(ctx, d, Math.PI, d.o, 15);
16
      ctx.beginPath();
17
      var name = d.o.node_id;
18
      if (d.o) {
19
        name = d.o.hostname;
20
      }
21
      ctx.textAlign = 'center';
22
      ctx.fillStyle = config.forceGraph.labelColor;
23
      ctx.fillText(name, d.x, d.y + 20);
24
    }
25
  }
26
27
  function drawHighlightNode(d) {
28
    if (highlight && highlight.type === 'node' && d.o.node_id === highlight.id) {
29
      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
30
      ctx.fillStyle = config.forceGraph.highlightColor;
31
      ctx.fill();
32
      ctx.beginPath();
33
    }
34
  }
35
36
  function drawHighlightLink(d, to) {
37
    if (highlight && highlight.type === 'link' && d.o.id === highlight.id) {
38
      ctx.lineTo(to[0], to[1]);
39
      ctx.strokeStyle = config.forceGraph.highlightColor;
40
      ctx.lineWidth = LINE_RADIUS * 2;
41
      ctx.lineCap = 'round';
42
      ctx.stroke();
43
      to = [d.source.x, d.source.y];
44
    }
45
    return to;
46
  }
47
48
  self.drawNode = function drawNode(d) {
49
    if (d.x < transform.invertX(0) || d.y < transform.invertY(0) || transform.invertX(width) < d.x || transform.invertY(height) < d.y) {
50
      return;
51
    }
52
    ctx.beginPath();
53
54
    drawHighlightNode(d);
55
56
    ctx.moveTo(d.x + 3, d.y);
57
    ctx.arc(d.x, d.y, d.o.is_online ? 8 : 6, 0, 2 * Math.PI);
58
    ctx.fillStyle =  d.o.is_online ? (d.o.is_gateway ? config.forceGraph.nodeGatewayColor : config.forceGraph.nodeColor) : config.forceGraph.nodeOfflineColor;
59
    ctx.fill();
60
61
    drawDetailNode(d);
62
  };
63
64
  self.drawLink = function drawLink(d) {
65
    var zero = transform.invert([0, 0]);
66
    var area = transform.invert([width, height]);
67
    if (d.source.x < zero[0] && d.target.x < zero[0] || d.source.y < zero[1] && d.target.y < zero[1] ||
68
      d.source.x > area[0] && d.target.x > area[0] || d.source.y > area[1] && d.target.y > area[1]) {
69
      return;
70
    }
71
    ctx.beginPath();
72
    ctx.moveTo(d.source.x, d.source.y);
73
    var to = [d.target.x, d.target.y];
74
75
    to = drawHighlightLink(d, to);
76
77
    var grd = ctx.createLinearGradient(d.source.x, d.source.y, d.target.x, d.target.y);
78
    grd.addColorStop(0.45, d.color);
79
    grd.addColorStop(0.55, d.color_to);
80
81
    ctx.lineTo(to[0], to[1]);
82
    ctx.strokeStyle = grd;
83
    if (d.o.type.indexOf('vpn') === 0) {
84
      ctx.globalAlpha = 0.2;
85
      ctx.lineWidth = 1.5;
86
    } else {
87
      ctx.globalAlpha = 0.8;
88
      ctx.lineWidth = 2.5;
89
    }
90
    ctx.stroke();
91
    ctx.globalAlpha = 1;
92
  };
93
94
  self.setCTX = function setCTX(newValue) {
95
    ctx = newValue;
96
  };
97
98
  self.setHighlight = function setHighlight(newValue) {
99
    highlight = newValue;
100
  };
101
102
  self.setTransform = function setTransform(newValue) {
103
    transform = newValue;
104
  };
105
106
  self.setMaxArea = function setMaxArea(newWidth, newHeight) {
107
    width = newWidth;
108
    height = newHeight;
109
  };
110
111
  return self;
112
});
113